<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 需求1: 希望你开一个延时器, 2s以后 打印 张三
    // setTimeout(()=>{
    //   console.log('zs');
    // }, 2000)

    // 需求2: 封装函数
    // function fn() {
    //   setTimeout(()=>{
    //     console.log('zs');
    //   }, 2000)
    // }

    // fn()

    // 需求3: 我希望将来2s以后要做的事情不写死, 2s以后打印 ls / ww

    function fn(callback) {
      setTimeout(()=>{
        callback()
      }, 2000)
    }

    // 函数 做为 实参 传递 => 回调函数
    // fn(function() {
    //   console.log('zs');
    // })

    // fn(function() {
    //   console.log('ls');
    // })

    // 需求4: 希望2s打印 zs 以后 再过2s  打印ls

    fn(function() {
      console.log('zs');

      fn(function() {
        console.log('ls');

        fn(function() {
          console.log('ww');
        })
      })
    })

    // 回调地狱 => Promise


    // Promise 承诺(一旦状态确定, 就不会在改变了)

    // 解决回调地狱 => 封装一个异步操作 => .then .catch

    // pending(进行中)  fulfilled(成功)  rejected(失败)
    // const p = new Promise((resolve, reject) => {
      // 成功 resolve(res),  promise 状态 改为fulfilled
      // 失败 reject(err), promise 状态 改为rejected
    //   resolve(2)
    // })

    // p.then((res) => {

    // }).catch((err) => {

    // })



    // 等一个异步操作结束以后, 做某件事 => 回调函数  => promise

    // 只需要你把这个异步操作封装成一个promise => 异步操作的容器

    // function fn() {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(()=>{
    //       resolve()
    //     }, 2000)
    //   })
    // }

    // 2s 以后 打印zs
    // fn().then(() => {
    //   console.log('zs');
    //   return fn()
    // }).then(() => {
    //   console.log('ls');
    //   return fn()
    // }).then(() => {
    //   console.log('ww');
    // })


    // async function test() {
    //   await fn()
    //   console.log('zs');

    //   await fn()
    //   console.log('ls');

    //   await fn()
    //   console.log('ww');
    // }

    // test()


    // 你希望等某个异步操作结束以后, 做某件事 => 需求
    // 1. 回调函数  => 回调地狱
    // 2. 封装成一个promise => .then .catch  /  await


  </script>
</body>
</html>
